<template>
  <div class="addAddr">
    <div class="info_item">
      <label>收货人</label>
      <input type="text" placeholder="请填写收货人" v-model="receivPeople">
    </div>
    <div class="info_item">
      <label>手机号码</label>
      <input type="number" placeholder="请输入手机号码" v-model="tel">
    </div>
    <div class="info_item" @click="componentShow=true">
      <label>所在地区</label>
      <input type="text" disabled placeholder="选择所在地区" class="selectAddr" v-model="addrText">
    </div>
    <div class="info_item" style="height: auto;">
      <label>详细地址</label>
      <!-- <input type="text" placeholder="请填写详细地址"> -->
      <textarea rows="5" placeholder="请填写详细地址" v-model="fullAddr"></textarea>
    </div>
    <div class="saveBtnWrap">
      <div class="saveBtn" @click="add">保存</div>
    </div>
    <selectAddr @sendAddrInfo="sureAddr" v-show="componentShow"></selectAddr>
  </div>
</template>

<script>
import selectAddr from "./components/selectAddr";
import { addAddr } from "@/api/index";
export default {
  data() {
    return {
      receivPeople: "",
      tel: "",
      fullAddr: "",
      province: "",
      area: "",
      city: "",
      is_default: 0,
      addrText: "",
      componentShow: false
    };
  },
  created() {
    document.title = "创建收货地址";
    if (this.$route.params.oldInfo) {
      this.receivPeople = this.$route.params.oldInfo.nickname;
      this.tel = this.$route.params.oldInfo.tel;
      this.fullAddr = this.$route.params.oldInfo.address;
      this.is_default = this.$route.params.oldInfo.is_default;
      this.province = this.$route.params.oldInfo.province;
      this.city = this.$route.params.oldInfo.city;
      this.area = this.$route.params.oldInfo.area;
      this.addrText =
        this.$route.params.oldInfo.province +
        this.$route.params.oldInfo.city +
        this.$route.params.oldInfo.area +
        this.$route.params.oldInfo.address;
    }
    this.$store.commit("SETPAGEINFO", {
      title: "创建收货地址",
      description: ""
    });
  },
  methods: {
    add() {
      //验证姓名
      var nameReg = /^([\u4e00-\u9fa5]){2,7}$/;
      if (!nameReg.test(this.receivPeople)) {
        // el.warning.name = "请正确输入姓名";
        this.$toast("姓名输入不合法！");
        return false;
      }
      // 验证手机号
      var phoneRegex = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneRegex.test(this.tel)) {
        // el.warning.telNumber = "请输入正确的手机号";
        this.$toast("请输入正确的手机号");
        return false;
      }
      // 验证地址
      if(this.province == '' || this.city == '' || this.area == '' || this.addrText == '') {
        this.$toast("地址信息输入不完整");
        return false;
      }
      const addrInfo = {
        nickname: this.receivPeople,
        tel: this.tel,
        province: this.province,
        city: this.city,
        area: this.area,
        address: this.fullAddr,
        is_default: this.is_default
      };
      if (this.$route.params.oldInfo) {
        addrInfo.id = this.$route.params.oldInfo.id;
      }
      addAddr(addrInfo).then(result => {
        if (result.data.success == "yes") {
          this.$toast({
            message: "保存成功",
            iconClass: "iconfont icon-dagou_wuquan"
          });
          setTimeout(() => {
            // if (this.$route.params.id) { 忘记了为啥要判断有没有这个id
            //   this.$router.push({
            //     name: "确认订单",
            //     params: this.$route.params
            //   });
            // } else {
            //   window.history.go(-1); 这回跳也忘记了为啥
            // }
            this.$router.push({ //暂时先这样
              name: "收货地址列表",
              params: this.$route.params
            });
          }, 1000);
        } else {
          this.$toast({
            message: result.data.message,
            iconClass: "iconfont icon-X"
          });
        }
      });
    },
    sureAddr(data) {
      this.province = data.province;
      this.city = data.city;
      this.area = data.area;
      this.addrText = data.addrText;
      this.componentShow = data.flag;
    }
  },
  components: {
    selectAddr
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.addAddr {
  font-size: to(25);
  .info_item {
    width: 100%;
    height: to(70);
    display: -webkit-flex;
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #fcfcfc;
    label {
      flex: 3;
      line-height: to(71);
      color: #505050;
      padding-left: to(19);
    }
    textarea {
      flex: 7;
      border: 0;
      font-size: to(25);
      height: 300%;
      padding: to(15) to(15) to(15) 0;
      line-height: to(40);
      outline: none;
      resize: none;
      &::-webkit-input-placeholder {
        color: #d0d0d0;
      }
    }
    input {
      flex: 7;
      font-size: to(25);
      border: 0;
    }
    .selectAddr {
      background-color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &::-webkit-input-placeholder {
        color: #3d3d3d;
      }
    }
    input::-webkit-input-placeholder {
      color: #d0d0d0;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #d0d0d0;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #d0d0d0;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #d0d0d0;
    }
  }
  .saveBtnWrap {
    width: 100%;
    height: to(117);
    padding: to(20);
    position: fixed;
    bottom: 0;
    .saveBtn {
      width: 100%;
      height: 100%;
      background-color: #9d0000;
      text-align: center;
      color: white;
      font-size: to(28);
      line-height: to(77);
    }
  }
}
</style>
